<script setup>
    import { useAsideMenu, useToken, useRouting } from "../storePiana/index"
    import { getCurrentInstance, reactive } from "vue"
    import { useRouter } from "vue-router"

    const router = useRouter()
    const AsideMenu = useAsideMenu()
    const Routing = useRouting()
    const Token = useToken()
    const { proxy } = getCurrentInstance()
    const loginForm = reactive({
        username: "admin",
        password: "admin",
    })

    const login = async () => {
        const res = await proxy.$api.getMenu(loginForm)
        // console.log("login-res", res)
        AsideMenu.handleAsideMenu(res.menu)
        AsideMenu.addMenu(router)
        Routing.routing(router)

        // console.log("router", router)
        Token.setToken(res.token)
        router.push({
            name: "home",
        })
        // console.log("Navigation to 'home' successful") // 添加调试信息
    }
</script>

<template>
    <el-card class="login-container-card">
        <el-form :model="loginForm" class="login-container">
            <h3>系统登录</h3>
            <el-form-item>
                <el-input
                    type="input"
                    placeholder="请输入账号"
                    v-model="loginForm.username"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                    type="password"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login()">登录</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<style lang="less" scoped>
    .login-container-card {
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        h3 {
            text-align: center;
            margin-bottom: 30px;
            color: #505450;
        }
        .el-button {
            margin: 0 auto;
        }
    }
</style>
